<template>
    <div class="signUp-container">
        <div class="signUp">
            <div class="signUp-head">
                <span>用户注册</span>
            </div>
            <el-form
                :model="registerForm"
                ref="registerForm"
                label-width="70px"
                class="demo-ruleForm"
                :rules="rules"
            >
                <el-form-item prop="name" label="用户名">
                    <el-input
                        v-model="registerForm.name"
                        placeholder="用户名"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="email" label="邮箱">
                    <el-input
                        v-model="registerForm.email"
                        placeholder="邮箱"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="verificationCode" label="验证码">
                    <el-input
                        v-model="registerForm.verificationCode"
                        placeholder="验证码"
                    >
                        <template #append>
                            <el-button
                                :disabled="countdown > 0"
                                @click="sendCode"
                                type="primary"
                            >
                                {{
                                    countdown > 0
                                        ? `${countdown}s 后重新发送`
                                        : "发送"
                                }}
                            </el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input
                        type="password"
                        v-model="registerForm.password"
                        placeholder="密码"
                    ></el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button @click="goback(-1)">取消</el-button>
                    <el-button type="primary" @click="SignUp">确定</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import loginLogo from "../components/LoginLogo";
import { rules, cities } from "@/assets/data/form";
import { mixin } from "@/mixins";
import { SignUp, sendCode } from "../api/index";

export default {
    name: "sing-up",
    mixins: [mixin],
    components: {
        loginLogo,
    },
    data() {
        return {
            registerForm: {
                name: "", // 用户昵称
                password: "", // 密码
                email: "", // 邮箱
                verificationCode: "", // 验证码
            },
            cities: [], // 所有的地区--省
            rules: {}, // 表单提交的规则
            countdown: 0, // 点击后的读秒
        };
    },
    mounted() {},
    created() {
        this.rules = rules;
        this.cities = cities;
    },
    methods: {
        sendCode() {
            let _this = this;
            // 发送验证码的逻辑
            sendCode(this.registerForm.email)
                .then((res) => {
                    if (res.code === 1) {
                        _this.notify("发送成功", "success");
                        // 发送成功后开始倒计时
                        this.startCountdown();
                    } else {
                        _this.notify("发送失败", "error");
                    }
                })
                .catch((err) => {
                    _this.notify(err.msg, "error");
                });
        },
        startCountdown() {
            this.countdown = 60; // 设置倒计时时长，单位：秒
            const timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(timer); // 清除定时器
                }
            }, 1000);
        },
        // 注册
        SignUp() {
            let _this = this;
            let params = {
                name: this.registerForm.name,
                password: this.registerForm.password,
                email: this.registerForm.email,
                verificationCode: this.registerForm.verificationCode,
            };
            SignUp(params)
                .then((res) => {
                    if (res.code === 1) {
                        _this.notify("注册成功", "success");
                        setTimeout(function () {
                            _this.$router.push({ path: "/" });
                        }, 2000);
                    } else {
                        _this.notify(res.msg, "error");
                    }
                })
                .catch((err) => {
                    _this.notify(err.msg, "error");
                });
        },
        goback(index) {
            this.$router.go(index);
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/sign-up.scss";
</style>
